<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /*
            display:
                inline; 行内元素
                block; 块级元素
                inline-block; 既是行内，也是块级元素
        */

        div{
            border: red 1px solid;
            width: 100px;
            height: 100px;
            /*display: inline-block;*/
            display: inline;
        }

        span{
            border: red 1px solid;
            width: 100px;
            height: 100px;
            /*display: block; 行内元素变成块级元素*/
            /*display: block;*/
            display: inline-block;
        }
    </style>
</head>
<body>
<div>块级元素div</div>
<span>行内元素span</span>
</body>
</html>